import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { Col, Form, Input, message, Row, Select, Typography } from 'antd';
import { useRequest } from '@/hooks';
import CityPicker from '@/components/CityPicker';
import FormContainer from './FormContainer';

const { Option } = Select;
const { Text } = Typography;

/**
 * 员工档案 - 联系信息 - 联系信息
 */
const ContactsSection = ({ formData, onChange, readonly, saveAction }) => {
    const formRef = useRef();
    // 提交
    const { run: submitRun } = useRequest(submitData => saveAction && saveAction(submitData), {
        manual: true
    });

    // 保存
    const handleSubmit = async values => {
        const submitData = Object.assign({
            employeeCode: formData.employeeCode,
            personalEmail: values.personalEmail,
            mobile: values.mobile,
            areaCode: values.areaCode,
            wechatNo: values.wechatNo,
            qqNo: values.qqNo,
            address: values.address?.join(','),
            detailAddress: values.detailAddress
        });
        // 提交
        const res = await submitRun(submitData);
        if (res.code === 10000) {
            message.success(res.msg);
            onChange(submitData);
        } else {
            message.error(res.msg);
        }
    };

    // 国籍/籍贯预处理
    const restoreArrayLinkString = data => (!data ? [] : data.split(','));

    // render
    return (
        <FormContainer ref={formRef} title="联系信息" hasEditAuth={!readonly && !!saveAction} onSubmit={handleSubmit}>
            {({ getFieldDecorator }, editStatus) => (
                <>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="个人邮箱">
                                {editStatus ? (
                                    getFieldDecorator('personalEmail', {
                                        initialValue: formData?.personalEmail,
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入个人邮箱'
                                            },
                                            {
                                                pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                                                message: '请输入正确的个人邮箱'
                                            },
                                            { max: 50, message: '字数不能超过50个字符' }
                                        ]
                                    })(<Input placeholder="请输入个人邮箱" allowClear maxLength={50} />)
                                ) : (
                                    <div className="multiLineText">{formData?.personalEmail || '--'}</div>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="企业邮箱">
                                {/* {editStatus ? (
                                    getFieldDecorator('email', {
                                        initialValue: formData?.email,
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入企业邮箱'
                                            },
                                            {
                                                pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                                                message: '请输入正确的企业邮箱'
                                            },
                                            { max: 50, message: '字数不能超过50个字符' }
                                        ]
                                    })(<Input placeholder="请输入企业邮箱" allowClear maxLength={50} />)
                                ) : (
                                    <div className="multiLineText">{formData?.email || '--'}</div>
                                )} */}
                                <div className="multiLineText">{formData?.email || '--'}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="手机号码">
                                {editStatus ? (
                                    getFieldDecorator('mobile', {
                                        initialValue: formData.mobile || undefined,
                                        rules: [
                                            {
                                                required: true,
                                                validator(rule, value, callback) {
                                                    const regex = /^\d{7,11}$/;
                                                    if (!value) {
                                                        callback('手机号不能为空');
                                                    } else if (!regex.test(value)) {
                                                        callback('只能输入7-11位数字');
                                                    }
                                                    callback();
                                                }
                                            }
                                        ]
                                    })(
                                        <Input
                                            placeholder="请填入手机号"
                                            addonBefore={getFieldDecorator('areaCode', {
                                                initialValue: formData.areaCode || '86'
                                            })(
                                                <Select placeholder="区号" style={{ width: 80 }}>
                                                    <Option value="86">+86</Option>
                                                    <Option value="65">+65</Option>
                                                </Select>
                                            )}
                                        />
                                    )
                                ) : (
                                    <Text>
                                        {formData.mobile
                                            ? `${formData?.areaCode ? `+${formData.areaCode}` : ''} ${formData.mobile}`
                                            : '--'}
                                    </Text>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="微信号">
                                {editStatus ? (
                                    getFieldDecorator('wechatNo', {
                                        initialValue: formData?.wechatNo,
                                        rules: [{ max: 100, message: '字数不能超过100个字符' }]
                                    })(<Input placeholder="请输入微信号" allowClear maxLength={100} />)
                                ) : (
                                    <div className="multiLineText">{formData?.wechatNo || '--'}</div>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="QQ号">
                                {editStatus ? (
                                    getFieldDecorator('qqNo', {
                                        initialValue: formData?.qqNo,
                                        rules: [{ max: 60, message: '字数不能超过60个字符' }]
                                    })(<Input placeholder="请输入QQ号" allowClear maxLength={100} />)
                                ) : (
                                    <div className="multiLineText">{formData?.qqNo || '--'}</div>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="居住地址">
                                {editStatus ? (
                                    getFieldDecorator('address', {
                                        initialValue: formData?.address ? restoreArrayLinkString(formData?.address) : []
                                    })(<CityPicker valueType="array" showSearch placeholder="请选择居住地址" />)
                                ) : (
                                    <>
                                        <Text>{formData?.address ? formData?.address.replace(/[,]/g, '/') : '--'}</Text>
                                    </>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={12} />
                        <Col span={12}>
                            <Form.Item label=" " colon={false}>
                                {editStatus ? (
                                    getFieldDecorator('detailAddress', {
                                        initialValue: formData?.detailAddress || undefined,
                                        rules: [{ max: 200, message: '字数不能超过200个字符' }]
                                    })(
                                        <Input.TextArea
                                            minLength={1}
                                            maxLength={200}
                                            rows={3}
                                            placeholder="请输入详细居住地址"
                                        />
                                    )
                                ) : (
                                    <div className="multiLineText" style={{ display: 'block', marginTop: '-12px' }}>
                                        {formData?.detailAddress}
                                    </div>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                </>
            )}
        </FormContainer>
    );
};

// prop
ContactsSection.propTypes = {
    formData: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    saveAction: PropTypes.func,
    readonly: PropTypes.bool
};

ContactsSection.defaultProps = {
    saveAction: null,
    readonly: false
};

export default ContactsSection;
